import { ComponentProps, Mut, VueComponent } from "vue3-oop";
import { Collapse,CollapsePanel,FormItem, Input,Select,SelectOption,Switch,Modal,Button,Table,Space } from 'ant-design-vue';
import { EditFilled,CheckCircleFilled,DeleteFilled } from '@ant-design/icons-vue'
import { FormData, WidgetItem } from '@/components/FormDesigner/types';
import { CARD,STATUS_OPTIONS } from './attr-card'
import CfgBasic from '../_common/cfg-basic'
import CfgLayout from '../_common/cfg-layout'
import moduleCss from './cfg-card.module.scss';

interface IProps {
  formData: FormData,
  widgetItem: WidgetItem
}
export default class CfgCard extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetItem: {}
  }

  @Mut() state = {
    activePanel: ['BASIC','LAYOUT','CARD'],
    tabs:{
      modalVisible: false,
      editable: new Set<number>(),
    }
    
  }

  render(){
    const { formData,widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as CARD

    return(
      <Collapse
        activeKey={this.state.activePanel}
        onChange={(newActiveKey)=>{this.state.activePanel = newActiveKey as string[]}}
      >
        <CollapsePanel header='基本属性' key='BASIC' >
          <CfgBasic widgetItem={widgetItem} />
        </CollapsePanel>
        <CollapsePanel header='布局属性' key='LAYOUT' >
          <CfgLayout formData={formData} widgetItem={widgetItem} />
          <FormItem label="默认状态">
            <Select value={attr.layout_status} onChange={(value)=>{attr.layout_status = value as any}}>
              {STATUS_OPTIONS.map((item)=>(<SelectOption value={item.value}>{item.label}</SelectOption>))}
            </Select>
          </FormItem>
        </CollapsePanel>
        <CollapsePanel header='卡片属性' key='CARD' >
          <FormItem label='显示标题'>
            <Switch size="small" 
              checked={attr.showTitle}
              onChange={(value)=>{attr.showTitle = value as boolean}}
            />
          </FormItem>
          <FormItem label="卡片标题">
            <Input size='small'
              value={attr.title}
              onChange={(event) => { attr.title = event.target.value as string; }}
            />
          </FormItem>
          <FormItem label='显示分页'>
            <Switch size="small" 
              checked={attr.showTab}
              onChange={(value)=>{attr.showTab = value as boolean}}
            />
          </FormItem>
          <FormItem label="分页配置">
            <Button size="small" onClick={()=>{this.state.tabs.modalVisible = true}}>编辑</Button>
            <Modal
              visible={this.state.tabs.modalVisible}
              title='分页配置'
              class={[moduleCss['fdn-modal-option']]}
              onCancel={()=>{this.state.tabs.modalVisible=false}}
            >
              {{
                default:()=>(<Table 
                  key='value'
                  pagination={false}
                  columns={[{title: '分页编码',dataIndex: 'key',width:'30%'},{title: '分页标题',dataIndex: 'tab',width:'50%'},{title: '操作',dataIndex: 'actions',width:'20%'}]}
                  dataSource={attr.tabList}
                >
                  {{
                    bodyCell:({text, record, index, column}:any)=>{
                      if(column.dataIndex==='key'&&this.state.tabs.editable.has(index)){
                        return <Input value={record.key} onChange={(event)=>{record.key = event.target.value as string;}} />
                      }
                      if(column.dataIndex==='tab'&&this.state.tabs.editable.has(index)){
                        return <Input value={record.tab} onChange={(event)=>{record.tab = event.target.value as string;}} />
                      }
                      if(column.dataIndex==='actions'){
                        return <Space>
                          {this.state.tabs.editable.has(index)?<CheckCircleFilled onClick={()=>{this.state.tabs.editable.delete(index)}}/>:<EditFilled onClick={()=>{this.state.tabs.editable.add(index)}} />}
                        </Space>
                      }
                    }
                  }}
                </Table>),
                footer:()=>(<Space>
                  <Button onClick={()=>{this.state.tabs.modalVisible=false}}>关闭</Button>
                </Space>)
              }}
            </Modal>
          </FormItem>
        </CollapsePanel>
      </Collapse>
    )
  }
}